<template>
	<view class="beijingse">
		<header-top :messageInfo="{typeFlag:false,message:'首页',liner:false}"></header-top>
		<view class="mainpadding">
			<!-- 轮播图 -->
			<u-swiper :list="list1" height="194"></u-swiper>
			<!-- 所有卡 -->
			<view class="flexbetween flex_wrap">
				<view class="dianxin margin_top" v-for="item in fllist" :key="item.id" :style="{'background-image':'url('+item.image_text+')'}" @click="tzsplb(item.id)">
					<view class="sanshier">{{item.name}}</view>
					<view class="margin_top1 lansetext">{{item.description}}</view>
				</view>
			</view>
			<!-- 限时秒杀 -->
			<view class="margin_top mainpadding xsms radius">
				<view class="flexbetween">
					<view class="xiansms">
						<image src="../../static/image/system/xiansms.png" mode=""></image>
					</view>
					<view class="flexleft">
						<view class="fensetext margin_right3">距离结束{{timeData.days}}天</view>
						<u-count-down :time="Time" format="HH:mm:ss" autoStart millisecond
							@change="onChange">
							<view class="time">
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.hours }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds }}</text>
								</view>
							</view>
						</u-count-down>
					</view>
				</view>
			</view>
			<!-- 商品 -->
			<view class="flexbetween ffffff radius margin_top mainpadding" v-for="item in listms.data" :key="item.id" @click="todetail(item.id)">
				<view class="zuobox">
					<image :src="item.image_text" mode=""></image>
				</view>
				<view class="youbox">
					<view class="titletext xiankuan">{{item.name}}</view>
					<view class="huisetext" style="height: 84rpx;margin-top: 10rpx;">{{item.des?item.des:'暂无'}}</view>
					<view class="flexbetween">
						<view class="qianshutext">￥{{item.price}}</view>
						<view class="samllbtn">立即抢购</view>
					</view>
				</view>
			</view>
			<!-- 猜你喜欢 -->
			<view class="margin_top">
				<view class="flexcenter">
					<view class="sanshier margin_right1">猜</view>
					<view class="heiyuandian margin_right1"></view>
					<view class="sanshier margin_right1">你</view>
					<view class="heiyuandian margin_right1"></view>
					<view class="sanshier margin_right1">喜</view>
					<view class="heiyuandian margin_right1"></view>
					<view class="sanshier">欢</view>
				</view>
				<view class="flexbetween flex_wrap">
					<view class="shangpinbox margin_top" v-for="item in list.data" :key="item.id" @click="todetail(item.id)">
						<view class="toupian">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="mainpadding baisebox ffffff">
							<view class="titletext yhycyc">{{item.name}}</view>
							
							<!-- <view class="miaoshabtn margin_top1" v-if="item.type==1">普通</view> -->
							<view class="miaoshabtn margin_top1" v-if="item.type==2">秒杀</view>
							<view class="flexbetween margin_top1">
								<view class="qianshutext">￥{{item.price}}</view>
								<view class="gouwuche"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				timeData: {},
				list1: [],
				type:0,//商品列表参数
				key:'',//关键字
				flid:'',//分类
				page:1,
				limit:6,
				list:{
					data:[],
				},
				limitms:100,
				listms:{
					data:[],
				},
				fllist:[],
				Time:'',
			}
		},
		onLoad(options) {
			if(options.user_id){
				let lastuser_id = options.user_id
				uni.setStorageSync('lastuser_id', lastuser_id)
				console.log(lastuser_id,"上级id9999")
			}
			this.getswiper(); //轮播图
			this.getshoplist();//商品列表
			this.getmslist();//秒杀列表
			this.getfenlei();
			this.getovertime();
		},
		methods: {
			//计算两个时间之间的时间差 多少天时分秒
			intervalTime(startTime,endTime) {
			    var timestamp = (Date.parse(new Date()))/1000;//计算当前时间戳 (毫秒级)
			     var date1 = ""; //开始时间
			    if(timestamp<startTime){
			        date1=startTime;
			    }else{
			        date1 = timestamp; //开始时间
			    }
			    var date2 = endTime; //结束时间
			    // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
			    var date3 =  (date2- date1)*1000; //时间差的毫秒数
			    //计算出相差天数
			    var days = Math.floor(date3 / (24 * 3600 * 1000));
			    //计算出小时数
			
			    var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
			    var hours = Math.floor(leave1 / (3600 * 1000));
			    //计算相差分钟数
			    var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
			    var minutes = Math.floor(leave2 / (60 * 1000));
			
			    //计算相差秒数
			
			    var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
			    var seconds = Math.round(leave3 / 1000);
			    // console.log(days + "天 " + hours + "小时 ")
			    // return   days + "天 " + hours + "小时 " + minutes + " 分钟" + minutes + " 秒"
			    // return   days + "天 " + leave1 + "剩余毫秒 "
				return {
					days:days,
					hours:hours,
					minutes:minutes,
					seconds:seconds,
				}
			},
			getovertime(){
				let _this = this;
				httpRequest.request('api/index/getConfigInfo','POST',{
				}).then(res => {
					if(res.code == 1){
						let time = Date.parse(new Date()); //当前时间戳
						_this.Time = res.data.mstime*1000 - time;
						_this.timeData = _this.intervalTime(time/1000,res.data.mstime);
						console.log(_this.overtime);
					}
				})
			},
			
			getfenlei(){
				let _this = this;
				httpRequest.request('api/goods/goodsCategory','POST',{
					limit:4,
				}).then(res => {
					if(res.code == 1){
						_this.fllist = res.data;
					}
				})
			},
			todetail(id){
				uni.navigateTo({
					url:'/pages/homepage/shangpinxq?id=' + id,
				})
			},
			//秒杀列表
			getmslist(){
				let _this = this;
				httpRequest.request('api/goods/goodslist','POST',{
					page:1,
					limit:_this.limitms,
					orderby:_this.type,
					keywords:_this.key,
					goods_category_id:_this.flid,
					type:2,
				}).then(res => {
					if(res.code == 1){
						let resList = res.data.data;
						_this.listms = res.data
						_this.listms.data = resList;
					}
				})
			},
			//商品列表
			getshoplist(isPage,page){
				let _this = this;
				httpRequest.request('api/goods/goodslist','POST',{
					page:page||1,
					limit:_this.limit,
					orderby:_this.type,
					keywords:_this.key,
					goods_category_id:_this.flid,
					type:0,
				}).then(res => {
					if(res.code == 1){
						let resList = res.data.data;
						if (isPage == true) {
							_this.list.data.push(...resList);
						} else {
							_this.list = res.data
							_this.list.data = resList;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.total <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getshoplist(true, page);
			},
			//轮播图
			getswiper(){
				let _this = this;
				httpRequest.request('api/index/getAdvertiseList','POST',{
					advertise_position_id:11,
					is_more:1
				}).then(res => {
					if(res.code == 1){
						console.log(res);
						res.data.forEach(item => {
							_this.list1.push(item.image_text)
							console.log(_this.list1)
						})
					}
				})
			},
			// 跳转商品列表
			tzsplb(num){
				//1为电信卡2为移动卡3为联通卡4为流量卡
				uni.navigateTo({
					url:'/pages/homepage/shangplb?type=' + num
				})
			},
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>
<style lang="scss" scoped>
	/deep/.time__doc {
		color: #fff !important;
	}

	/deep/.time__custom {
		background-color: #fff !important;
		border-radius: 50% !important;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #FD3850;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}
</style>
<style lang="scss" scoped>
	.miaoshabtn {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FD463E;
		width: 78rpx;
		height: 38rpx;
		background: rgba(253, 70, 62, .1);
		border-radius: 7rpx;
	}

	.baisebox {
		border-radius: 0 0 11rpx 11rpx;
	}

	.yhycyc {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.toupian {
		height: 338rpx;
		width: 100%;
		border-radius: 11rpx 11rpx 0 0;

		image {
			border-radius: 11rpx 11rpx 0 0;
			width: 100%;
			height: 100%;
		}
	}

	.shangpinbox {
		width: 48%;
	}

	.heiyuandian {
		width: 5rpx;
		height: 5rpx;
		border-radius: 50%;
		background: #000000;
	}

	.samllbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 140rpx;
		height: 51rpx;
		background: linear-gradient(90deg, #F65630 0%, #FE6763 100%);
		border-radius: 26rpx;
	}

	.youbox {
		width: 67%;
	}

	.qianshutext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.zuobox {
		width: 29%;
		height: 202rpx;
		border-radius: 11rpx;

		image {
			width: 100%;
			border-radius: 11rpx;
			height: 100%;
		}
	}

	.fensetext {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFEBEB;
	}

	.xiansms {
		width: 220rpx;
		height: 51rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xsms {
		background-color: #f95c42;
	}

	.liuliang {
		padding: 25rpx 28rpx 58rpx;
		width: 40%;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/liuliang.png');
	}

	.liantong {
		padding: 25rpx 28rpx 58rpx;
		width: 40%;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/liantong.png');
	}

	.yidong {
		padding: 25rpx 28rpx 58rpx;
		width: 40%;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/yidong.png');
	}

	.hongsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ED8778;
	}

	.zisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #9996FF;
	}

	.huangsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ED8778;
	}

	.lansetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #64A1FC;
	}

	.dianxin {
		padding: 25rpx 28rpx 58rpx;
		width: 40%;
		background-size: 100% 100%;
		// background-image: url('../../static/image/system/dianxin.png');
	}
</style>
